<template>
  <div class="icons">
    <div class="icon" v-for="item in icons" :key="item.id">
      <div class="icon-content">
        <img :src="item.iconUrl" alt class="icon-img" />
      </div>
      <div class="icon-title">{{item.title}}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Icons',
  props: {
    icons: Array
  },
}
</script>

<style scoped lang="stylus">
@import '~assets/css/varibles.styl'
.icons
  overflow hidden
  width 100%
  height 0
  padding-bottom 55%
  background #eee
  margin-top -3px
  .icon
    float left
    overflow hidden
    width 25%
    height 0
    padding-bottom 25%
    position relative
    .icon-content
      position absolute
      top 0
      left 0
      right 0
      bottom 0.44rem
      box-sizing border-box
      padding 0.1rem
      text-align center
      .icon-img
        height 100%
    .icon-title
      position absolute
      left 0
      right 0
      bottom 0.04rem
      line-height 0.4rem
      text-align center
      color $blackTextColor
</style>